<template>
  <div>
    <div>
      <el-row :gutter="20">
        <el-table :data="productList" style="width: 100%">
          <el-table-column
            prop="productId"
            label="产品编号"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="productSn"
            label="产品序列号"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="productName"
            label="产品名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="price"
            label="产品价格"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="category.categoryId"
            label="类别编号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="category.categoryName"
            label="类别名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="创建日期"
            width="200"
            align="center"
          ></el-table-column>
        </el-table>
      </el-row>
    </div>
    <div v-for="(productInformation, index) in productList" :key="index">
      <product-image-information
        :productInformation="productInformation"
      ></product-image-information>
      <product-image-information
        :productInformation="productInformation"
      ></product-image-information>
    </div>
  </div>
</template>

<script>
import { listAll } from "@/api/product";
import ProductImageInformation from "@/components/ProductImageInformation.vue";
export default {
  components: { ProductImageInformation },
  name: "Product",
  data() {
    return {
      productList: [
        {
          src: "https://g-search3.alicdn.com/img/bao/uploaded/i4/i1/4270443666/O1CN01FJwopz1cx4kKyxMYi_!!4270443666.png_250x250.jpg_.webp",
          productName: "iQOO9 手机",
          price: "￥4599.00",
          url: "/about",
        },
        {
          src: "https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i4/218470136/O1CN01OjA1P11CsKcgNew4N_!!0-saturn_solar.jpg_250x250.jpg_.webp",
          productName: "无蔗糖魔芋卷抹茶红豆卷",
          price: "￥60.00",
          url: "/about",
        },
      ],
    };
  },
  created() {
    this.getProductList();
  },
  methods: {
    getProductList() {
      listAll().then((response) => {
        this.productList = response.data;
      });
    },
    receiveMsgFromProduct(value) {
      this.item = value;
    },
  },
};
</script>

<style>
</style>